<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/hiconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/mescroll.min.css" />
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
				height: 180px;
			}
			
			.indexTask {
				margin: 8px 4px;
			}
			
			.indexTask .mui-btn {
				width: 49%;
			}
			
			.mui-btn-block {
				margin-bottom: 0px;
			}
			/*三大任务模块*/
			
			.taskModular {
				height: 45px;
				box-sizing: border-box;
				position: relative;
			}
			
			.taskModular:before {
				position: absolute;
				right: 0;
				top: 0;
				left: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.taskModular:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.flex-item {
				height: 45px;
				box-sizing: border-box;
				line-height: 45px;
				border-right: 1px solid #DDDDDD;
			}
			
			.active {
				color: rgb(255, 78, 0);
			}
			
			.bomBtn {
				height: 30px;
			}
			
			.bomBtn div {
				width: 100%;
			}
			
			.bomBtn div:first-child {
				border-right: 1px solid #DDDDDD;
			}
		</style>
	</head>

	<body>
		<div id="indexPage">
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">帮忙跑腿</h1>
			</header>
			<div id="mescroll" class="mui-content mescroll">
				<!--轮播-->
				<div class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="../images/indexSlide3.jpg" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../images/indexSlide1.jpg" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../images/indexSlide2.jpg" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../images/indexSlide3.jpg" /></a>
						</div>
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="../images/indexSlide1.jpg" /></a>
						</div>
					</div>
				</div>
				<!--2大模块-->
				<div class="hya-flex indexTask">
					<button type="button" class="mui-btn  mui-btn-block" style="background-color: #12b7f5;border: none;">
							<img src=""/>
							<span class="signSize whiteColor">发布跑腿</span>
						</button>
					<button type="button" class="mui-btn  mui-btn-block" style="background-color: #4cd946;border: none;">
							<img src=""/>
							<span class="signSize whiteColor">食堂带餐</span>
						</button>
				</div>
				<!--三个任务模块-->
				<div class="hya-flex mui-text-center taskModular">
					<div class="flex-item nearbyTask titleSize30 titleColor active">
						<i class="icon-paotui hIconfont"></i> 附近任务
					</div>
					<div class="flex-item releaseTask titleSize30 titleColor">
						<i class="icon-xiaoxi hIconfont"></i> 我的发布
					</div>
					<div class="flex-item robbingTask titleSize30 titleColor">
						<i class="icon-paotui hIconfont"></i> 我的抢单
					</div>
				</div>
				<div id="nearbyTask" class="mescrollList" v-show="nearbyListData.length>0">
					<ul class="mui-table-view" id="nearbyList">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="../images/hong_favicon.ico">
							<div class="mui-media-body">
								<span class="userColor titleSize30">附近任务 <span class="ordinarySize24 ordinaryColor mui-pull-right">10秒前</span></span>
								<p class='mui-ellipsis'>
									<i class="icon-paotui hIconfont smallTitleSize28"></i>
									<span class="ordinarySize24 ordinaryColor">清华大学 <span class="mui-pull-right btnPao">跑</span></span>
								</p>
								<div class="titleColor titleSize30" style="margin-top: 8px;">测试单</div>
							</div>
						</li>
						<li class="mui-table-view-cell hya-flex ordinaryColor bomBtn mui-text-center ordinarySize24">
							<div class="activeColor">新发布</div>
							<div>赚1元</div>
						</li>
					</ul>
				</div>

				<div id="releaseTask" class="mescroll mescrollList" v-show="releaseListData.length>0">
					<ul class="mui-table-view" id="releaseList">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="../images/hong_favicon.ico">
							<div class="mui-media-body">
								<span class="userColor titleSize30">我的发布 <span class="ordinarySize24 ordinaryColor mui-pull-right">10秒前</span></span>
								<p class='mui-ellipsis'>
									<i class="icon-paotui hIconfont smallTitleSize28"></i>
									<span class="ordinarySize24 ordinaryColor">清华大学 <span class="mui-pull-right btnPao">跑</span></span>
								</p>
								<div class="titleColor titleSize30" style="margin-top: 8px;">测试单</div>
							</div>
						</li>
						<li class="mui-table-view-cell hya-flex ordinaryColor bomBtn mui-text-center ordinarySize24">
							<div class="activeColor">新发布</div>
							<div>赚1元</div>
						</li>
					</ul>
				</div>

				<div id="robbingTask" class="mescroll  mescrollList" v-show="robbingListData.length>0">
					<ul class="mui-table-view" id="robbingList">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="../images/hong_favicon.ico">
							<div class="mui-media-body">
								<span class="userColor titleSize30">我的抢单 <span class="ordinarySize24 ordinaryColor mui-pull-right">10秒前</span></span>
								<p class='mui-ellipsis'>
									<i class="icon-paotui hIconfont smallTitleSize28"></i>
									<span class="ordinarySize24 ordinaryColor">清华大学 <span class="mui-pull-right btnPao">跑</span></span>
								</p>
								<div class="titleColor titleSize30" style="margin-top: 8px;">测试单</div>
							</div>
						</li>
						<li class="mui-table-view-cell hya-flex ordinaryColor bomBtn mui-text-center ordinarySize24">
							<div class="activeColor">新发布</div>
							<div>赚1元</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			window.addEventListener('reload', function() {
				plus.nativeUI.showWaiting();
				plus.webview.reload();
				plus.nativeUI.closeWaiting();
			})
			mui.init({
				swipeBack: true, //启用右滑关闭功能
			});
			var index_data = new Vue({
				el: "#indexPage",
				data: function() {
					return {
						nearbyListData: [], //附近
						robbingListData: [], //我的抢单
						releaseListData: [], //我的抢单
						getState:false,
						arr: ['nearby', 'release', 'robbing'],
						curNavIndex: 0,
						page: {
							num: 1,
							size: 10
						}
					}
				},
				created: function() {
					this.$nextTick(function() {
						mui('.mui-slider').slider({
							interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
						});
						var that = this;

						mui('.taskModular .flex-item').each(function(index, ele) {
							mui(ele)[0].addEventListener('tap', function() {
								//								plus.nativeUI.showWaiting();
								$(this).addClass('active').siblings().removeClass('active');
								$(mui('.mescrollList')[index]).show().siblings('.mescrollList').hide();
								that.curNavIndex = index;
								if(that.getState){
									return;
								}else{
									that.getState=true;
									plus.nativeUI.showWaiting();
									that.getData();
								}
							})
						})
					});
				},
				mounted: function() {
					this.$nextTick(function() {
						var self = this;
						self.curNavIndex=0;
						self.mescroll = new MeScroll('mescroll', { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
							up: {
								callback: self.upCallback, //上拉回调
								//以下参数可删除,不配置
								isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
								//page:{size:8}, //可配置每页8条数据,默认10

							}
						});
					})
				},
				methods: {

					//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
					upCallback: function(page) {
						//联网加载数据
						var self = this;
						var dataIndex = self.curNavIndex;
						var url="";
						getListDataFromNet(url, page.num, page.size, function(pageData) {
							self.nearbyListData=pageData;
							//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
							self.mescroll.endSuccess(pageData.length);
							//							plus.nativeUI.closeWaiting();
						}, function() {
							//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
							self.mescroll.endErr();
							//							plus.nativeUI.closeWaiting();
						});
					},
					getData:function(){
						var that=this;
						setTimeout(function(){
							that.getState=false;
						plus.nativeUI.closeWaiting();
						},2000)
						
					}
				},
			})

			function getListDataFromNet(url, pageNum, pageSize, successCallback, errorCallback) {
				//延时一秒,模拟联网
				setTimeout(function() {
					var listData = [1];

					//回调
					successCallback(listData);
				}, 1000);
			}
		</script>
	</body>

</html>